<template>
  <div class="wrap">
    <middle-info-view
      :distribution-goods-list="distributionGoodsList"
      :straight-goods="straightGoods"
      :GoodsList="GoodsList"
      :data="data"
    ></middle-info-view>


    <div class="mgt20">
      <el-button @click="jumpPage('middleList')">{{ $t('common.back') }}</el-button>
      <el-button type="primary" @click="pickedMiddle" v-if="data.status === 1 && (!data.labelOrder || data.labelOrder.status === 2)" :loading="btnLoading">{{$t('middle.确认已拣货')}}</el-button>
      <template v-if="data.status === 3 && data.boxPDF && data.cancel === 0">
        <middle-send-button :data="data" @sendMiddle="getData"></middle-send-button>
      </template>
      <middle-thermal :id="data.id"></middle-thermal>
      <middle-box-button :data="data"></middle-box-button>
      <middle-p-d-f-button :data="data"></middle-p-d-f-button>

    </div>
  </div>
</template>

<script>

import {deepCopy} from "@/utils";
import {jumpLabelOrderInfo, jumpPage, jumpShipmentInfo} from "@/utils/jumpView";
import {getMiddleInfo, pickedMiddleWorkOrder, saveMiddleGoodsNum, sendMiddle} from "@/api/middleWork";
import MiddleInfoView from "@/views/middleWork/components/MiddleInfoView.vue";
import MiddleSendButton from "@/views/middleWork/components/MiddleSendButton.vue";
import MiddleBoxButton from "@/views/middleWork/components/MiddleBoxButton.vue";
import MiddleThermal from "@/views/middleWork/components/MiddleThermal.vue";
import MiddlePDFButton from "@/views/middleWork/components/MiddlePDFButton.vue";

export default {
  name: "middleInfo",
  components: {MiddlePDFButton, MiddleThermal, MiddleBoxButton, MiddleSendButton, MiddleInfoView},
  data(){
    return {
      id: 0,
      loading: false,
      data: {},
      straightGoods: [], // 无需调货的商品
      distributionGoodsList: [], // 需要调货的商品
      btnLoading: false, // 操作按钮的loading
      GoodsList:[],
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getData()
  },
  methods:{
    jumpLabelOrderInfo,jumpPage,
    getData(){
      getMiddleInfo(this.id)
        .then(res=>{
          this.data = res.data
          this.straightGoods =  res.data.straightGoods
          this.distributionGoodsList = res.data.distributionGoods
           this.GoodsList = res.data.GoodsList

          this.straightGoods.forEach(item=>{
            item.rlGoodsNum = this.data.status < 2 && !item.save ? item.exGoodsNum : item.rlGoodsNum
          })
        })
    },
    // 保存对应的数量
    saveMiddleGoods(row){
      const data = {
        id: row.id,
        rlGoodsNum: row.rlGoodsNum
      }
      saveMiddleGoodsNum(data)
        .then(res=>{
          if(res.error === 0){
            this.$successMessage(res.message)
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    // 确认已拣货
    pickedMiddle(){
      let message = '';
      const flag = this.straightGoods.some(item=> {
        if(!item.rlGoodsNum){
          item.rlGoodsNum = 0
        }
        return item.rlGoodsNum !== item.exGoodsNum
      })
      if(flag){
        message = this.$t('middle.实际中转数量与预计中转数量存在差异，请先与用户沟通确认')
      }
      this.$confirm(message,{
        title: this.$t('middle.确认已拣货？'),
      })
        .then(_ => {
          const data = {
            id: this.data.id,
            boxNum: this.data.boxNum,
            straightGoods: this.data.straightGoods,
          }
          if(!data.boxNum){
            this.$errorMessage(this.$t('middle.请填写打包货箱数量'))
            return;
          }
          this.btnLoading = true
          pickedMiddleWorkOrder(data)
            .then(res=>{
              this.btnLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })


        })
        .catch(_ => {});



    },
    // 下载箱标
    downBoxPDF(){
      const pdf = this.data.boxPDF;
      window.open(pdf,'_blank')
    },
    // 确认已送仓
    sendMiddle(){
      this.$confirm('',{
        title: this.$t('middle.确认已送仓？'),
      })
        .then(()=>{
          this.btnLoading = true
          sendMiddle(this.data.id)
            .then(res=>{
              this.btnLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })

        })
        .catch(_ => {});
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.mergeCell1()
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    mergeCell1(){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'toGoodsId',
        'needDistributionNum',
        'operate',
        'totalRlGoodsNum'
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.distributionGoodsList.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并
        if(item.toSuitListId && item.toSuitListId === this.distributionGoodsList[index - 1].toSuitListId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },

  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}

.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.box-content{
  font-size: 15px;
}
</style>
